<template>
    <!-- <div class="cityBox"> -->
        <el-cascader  :empty-values="[undefined, null]" placeholder="选择城市" :options="options" filterable :props="props"
            @change="onChange" />
    <!-- </div> -->
</template>

<script setup lang="ts">
import { reactive, ref, defineEmits, defineProps, watch, Ref } from 'vue';
import citys from './CityData.json';
// var value1: string = ref('');
let options = reactive(citys);
const emit = defineEmits(['update:modelValue']);
// const model = defineModel()
var prop = defineProps({
    modelValue: {
        type: String
    }
});
// 级联选择器绑定的值
let props = reactive({
    expandTrigger: 'hover' as const,
    emitPath: false,
    value: 'code',
    // multiple:true,
    label: 'label',
    children: 'children'
});
// watch(
//     () => prop.modelValue,
//     (newValue, oldValue) => {

//         // console.log(newValue, oldValue);
//         console.log('========modelValue======', prop.modelValue);
//         // value1.value = prop.modelValue;
//     },
//     {
//         deep: true,
//         immediate: true
//     }
// );


// 点击触发事件 获取当前选中的城市信息
const onChange = (val: any) => {
console.log('========val======', val);
    // let newItem = optionsFn(options, val);
    // console.log(newItem);
    // value1.value = val;
    // 老写法
    emit('update:modelValue', val);
    // 新写法 3.4+
    // model.value=val
};



// // 定义接口类型
// interface OptionsInter {
//     label: string;
//     level: string;
//     code: string;
//     [propName: string]: any;
// }

// 通过城市编码 获取城市名称
// const optionsFn = (arr: OptionsInter[], code: string) => {
//     let newItem = ref<OptionsInter>();
//     arr.forEach((item) => {
//         if (item.children.length >= 1) {
//             for (const key in item.children) {
//                 if (item.children[key].code == code) {
//                     newItem = item.children[key];
//                 }
//             }
//         }
//     });
//     return newItem;
// };

</script>
<style scoped lang="less"></style>
